<template>
  <div class="announces right">
    <div class="topBox">
      <div class="welcomeBox">
        <img src="../../assets/images/userPic.png" />
        <a>
          <span class="walcome">Hi,欢迎来到云流客商</span>
          <span class="timeBox">2018年7月22日</span>
        </a>
      </div>
      <div class="loginBox">
        <a class="login">登录</a>
        <a class="register">注册</a>
      </div>
    </div>
    <div class="announceBox">
      <div class="titleBox">
        <i></i>
        <span class="title">最新公告</span>
        <a class="showMore">更多>></a>
      </div>
      <ul class="announceList">
        <li><router-link to="/News">小二分享大促干货</router-link></li>
        <li><router-link to="/News">茂名大件运营中心开仓公告</router-link></li>
        <li><router-link to="/News">京东PLUS会员权益更新及会费调整</router-link></li>
        <li><router-link to="/News">京东启用全新客服电话“950618”</router-link></li>
        <li><router-link to="/News">关于召回普利司通（天津）轮胎</router-link></li>
        <li><router-link to="/News">运营神器年中大促</router-link></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Announces'
}
</script>

<style lang="scss" scoped>
  .announces{
    width: 250px;
    height: 100%;
    background: #fff;
    .topBox{
      padding: 20px;
      border-bottom: 1px solid #f4f4f4;
      .welcomeBox{
        text-align: center;
        & *{
          display: inline-block;
        }
        &>*{
          vertical-align: middle;
        }
        a{
          width: 130px;
          padding-left: 10px;
        }
        span{
          width: 100%;
          text-align: left;
          &.timeBox{
            color: #bcbcbc
          }
        }
      }
      .loginBox{
        text-align: center;
        padding-top: 10px;
        a{
          display:inline-block;
          width: 42%;
          margin: 0 3%;
          border-radius: 14px;
          line-height: 28px;
          border: 1px solid #2499ef;
          &.login{
            background: #2499ef;
            color: #fff;
          }
          &.register{
            color: #2499ef;
          }
        }
      }
    }
    .announceBox{
      padding: 20px;
      .titleBox{
        line-height: 24px;
        position: relative;
        i{
          display: inline-block;
          width: 24px;
          height: 24px;
          background: url(../../assets/images/announce.svg) no-repeat center;
          background-size: 100% 100%;
          vertical-align: middle;
        }
        .title{
          color: #2499ef;
          padding-left: 5px;
          vertical-align: middle;
        }
        .showMore{
          color: #b9b9b9;
          position: absolute;
          right: 0;
          top: 0;
          cursor: pointer;
          &:hover{
            color: #2499ef;
          }
        }
      }
      .announceList{
        padding-top: 10px;
        line-height: 28px;
        color: #666666;
        li{
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin-bottom: 5px;
          cursor: pointer;
        }
      }
    }
  }
</style>
